<template>
    <section style="padding:10px;">
        <el-row>
            <el-col :span="24">
              <label>所属公司/部门:</label>
              <el-cascader   
                  :options="companyList"
                  change-on-select  
                  @change="handleGroupItemChange"
                  size="small"
                  clearable
                  v-model="searchForm.groupId"
                  placeholder="员工所属公司/部门"
                  :props="groupProps">
              </el-cascader> 
              <label>&nbsp;&nbsp;员工姓名:</label>
              <el-input
                class="searchInput"
                size="small"
                placeholder="员工姓名" 
                v-model="searchForm.name"
                clearable>
              </el-input>
                <el-button
                @click="searchEmployee"
                round size="small"  plain class="el-icon-search">
                  搜索
              </el-button>
            </el-col>
            <el-col :span="24" >
              <el-button round type="primary" @click="openAddEmployee"
              size="small" icon="el-icon-plus">新增员工</el-button> 
              <el-dropdown trigger="click">
                <el-button round size="small" type="primary" plain class="el-dropdown-link">
                    <i><font-awesome-icon :icon="['fas','sign-out-alt']"/></i>&nbsp;导入/导出
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>导入</el-dropdown-item>
                    <el-dropdown-item>导出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <el-dropdown trigger="click">
                  <el-button round size="small" type="primary" plain class="el-dropdown-link">
                      <i><font-awesome-icon :icon="['far','edit']"/></i>&nbsp;批量操作
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>禁用</el-dropdown-item>
                      <el-dropdown-item>删除</el-dropdown-item>
                  </el-dropdown-menu>
              </el-dropdown>
            </el-col> 
        </el-row>  
        <el-col class="space"></el-col>
        <el-table
          v-loading="listLoading"
          border
          ref="multipleTable"
          :data="employees" 
          style="width: 100%;"
          @selection-change="selectsChange">
          <el-table-column
            key="selection"
            v-if="!isToSelect"
            type="selection">
          </el-table-column>
          <el-table-column
            fixed
            key="selectitem"
            label="选择" 
            v-if="isToSelect">
            <template slot-scope="scope">
              <el-button @click="handleSelectItem(scope.row)" type="text">选择</el-button>
            </template>
          </el-table-column>
          <el-table-column 
            prop="realName"
            label="姓名" 
            width="120px"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            label="昵称" 
            width="130px"
            prop="nickName" >
          </el-table-column>
          <el-table-column
            prop="mobile"
            width="120px"
            label="手机号" >
          </el-table-column>
          <el-table-column 
            prop="status"
            width="80px"
            label="工作状态"  >
            <template slot-scope="scope">
              <el-tag
              size="mini" 
                :type="scope.row.workStatus == 1 ? 'success' : 'warning'"
                disable-transitions>{{scope.row.workStatus==1?"在职":"离职"}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            width="60px"
            prop="status"
            label="状态">
            <template slot-scope="scope">
              <el-tag
              size="mini"
                :type="scope.row.status == 1 ? 'success' : 'warning'"
                disable-transitions>{{scope.row.status==1?"正常":"禁用"}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" >
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                size="mini"
                @click="handleForce(scope.$index, scope.row)">{{scope.row.status==5?"解禁":"禁用"}}</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-col :span="24" class="toolbar">
              <el-pagination
              @size-change="sizeChange"
              @current-change="currentChange"
              :current-page="currentPage"
              :page-sizes="[20, 50, 100, 200]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
              </el-pagination>
          </el-col> 

          <el-dialog title="新增员工" @close="resetEmployeeForm('addEmployeeForm')" :visible.sync="dialogFormVisible">
            <el-form :model="addEmployeeForm" :rules="rules" ref="addEmployeeForm" size="small" label-width="120px"> 
                <el-form-item label="所属公司/部门" prop="name">
                  <el-cascader   
                      :options="companyList"
                      change-on-select  
                      @change="handleGroupItemChange"
                      size="small"
                      clearable
                      v-model="addEmployeeForm.groupId"
                      placeholder="员工所属公司/部门"
                      :props="groupProps">
                  </el-cascader>  
                </el-form-item> 
                <el-form-item label="员工姓名" prop="realName">
                    <el-input 
                      size="small"
                      class="searchInput"
                      placeholder="员工姓名" 
                      v-model="addEmployeeForm.realName"
                      clearable>
                    </el-input>
                </el-form-item> 
                <el-form-item label="员工手机号" prop="mobile">
                    <el-input 
                      size="small"
                      class="searchInput"
                      placeholder="员工手机号(用于登录)" 
                      v-model="addEmployeeForm.mobile"
                      clearable>
                    </el-input>
                </el-form-item> 
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitEmployeeForm('addEmployeeForm')">确 定</el-button>
            </div>
        </el-dialog>     
    </section>

</template>

<script>
import api from "@/service/api";
import http from "@/service/http";
import store from "@/store";
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapGetters } = createNamespacedHelpers("system/employee");

export default {
  data() {
    return {
      companyList: [],
      showD: false,
      input5: "",
      dialogFormVisible: false,
      addEmployeeForm: {
        groupId: [],
        realName: "",
        mobile:""
      },
      searchForm: {
        groupId: [],
        realName: "",
        mobile:""
      },
      groupProps: {
        label: "name",
        value: "id",
        children: "child",
        disabled: "disabled"
      },
      rules: {
        realName: [
          { required: true, message: "请输入真实姓名", trigger: "blur" }
        ],
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" }
        ],
        groupId: [
          { required: true, message: "请选择所属公司/部门", trigger: "change" }
        ]
      }
    };
  }, //计算属性

  computed: {
    //导入store的getters属性
    ...mapGetters([
      "employees",
      "currentPage",
      "listLoading",
      "total",
      "pageSize",
      "isToSelect"
    ])
  },
  methods: {
    //导入actions方法
    ...mapActions([
      "setStatus",
      "getEmployees",
      "selectsChange",
      "sizeChange",
      "currentChange",
      "selectEpmloyeeItem",
      "showDialog",
      "toSelect"
    ]),
    openAddEmployee() {
      this.dialogFormVisible = true;
      this.getCompanyList();
    },
    submitEmployeeForm(addEmployeeForm){
        this.$refs[addEmployeeForm].validate(valid => {
        if (valid) {
          let param = {
            realName:this.addEmployeeForm.realName,
            mobile:this.addEmployeeForm.mobile,
            groupId:this.addEmployeeForm.groupId[this.addEmployeeForm.groupId.length-1]
          }
          this.addEmployee(param);
        } else {
          return false;
        }
      });
    },
    resetEmployeeForm(addEmployeeForm) {
      this.dialogFormVisible = false;
      this.addEmployeeForm = {groupId:[]}
      this.$refs[addEmployeeForm].resetFields();
    },
    handleGroupItemChange(value) {
      console.log(value);
    },
    handleSelectItem(data) {
      let item = {
        userId: data.id,
        realName:data.realName,
        userName: data.userName,
        userType: 3
      };
      this.selectEpmloyeeItem(item);
      this.showDialog(false);
      this.toSelect(false);
    },
    handleForce(index,row){
      let str = row.status == 5?"解禁":"禁用";
       this.$confirm('确定'+str+'员工 [ '+row.realName+' ] 吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { 
          let ids = [row.id];   
          http.post(api.sysApi.batchDisabled, {ids:ids,status:row.status == 5?1:5}).then(data => {
            if(!data.success){
              return;
            }
            this.$message({
              message: '已'+str,
              type: "success"
            });
            this.getEmployees();
          });
      }).catch(() => {}); 
    },
    addEmployee(param){
        http.post(api.sysApi.addEmployee, param).then(data => {
            if(!data.success){
                return;
            }
            this.$message({
              message: "添加成功",
              type: "success"
            });
            this.dialogFormVisible = false;
            this.getEmployees();
        });
    },
    searchEmployee() {
      // if(this.addForm.groupId && this.addForm.groupId.length != 0){
      //     param.groupId = this.addForm.groupId[this.addForm.groupId.length-1];
      // }
      this.getEmployees();
    },
    //获取公司部门
    getCompanyList() {
      http.post(api.sysApi.groupTree, "").then(data => {
        this.companyList = data.data;
      });
    }
  },
  mounted() {
    this.setStatus('');
    this.getEmployees();
    this.getCompanyList();
  }
};
</script>

<style>
.space {
  height: 10px !important;
  width: 1px;
}
.searchInput {
  width: 300px;
}
</style>

